<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('登录')"/>
<th:block th:include="include :: datetimepicker-css"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/ocean/css/common.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/head.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/index.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/pagination.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/datepicker3.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/tanchuang.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/style.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/prt.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/bice.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/yulan.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/jquery.range.css" rel="stylesheet" type="text/css">
    <link href="/ajax/libs/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
    /*.time-input{
        width: 126px!important;
    }*/
</style>
<body>
<div class=" prt_cont1_box">
    <div class=" prt_cont1">
        <div class="border_t left"></div>
        <p class="p_title left">产品订阅</p>
        <div class="border_t right"></div>
        <div class="clearfix"></div>

        <div class="bc_contit1">
            <input type="hidden" id="productId" th:value="${product.id}"/>
            <input type="hidden" id="fileType" th:value="${product.fileType}"/>
            <input type="hidden" id="dyType" value="0"/>
            <div class="bc_contit2">
                <span class="bc_xz left">预报要素</span>
                <select class="left bc_xl">
                    <span th:each="items:${elementList}">
                        <option value="${items.englishAbbreviations}">[[${items.elementName}]]</option>
                    </span>
                </select>
                <div class="clearfix"></div>
            </div>
            <div class="bc_contit2">
                <span class="bc_xz left">订阅类型</span>
                <input type="hidden" id="workType" value="0"/>
                <a href="JavaScript:void(0)" onclick="cover('all')">
                    <div class="bc_xz2 left" id="all">全覆盖</div>
                </a>
                <a href="JavaScript:void(0)" onclick="cover('some')">
                    <div class="bc_xz1 left" id="some">部分覆盖</div>
                </a>
                <div class="clearfix"></div>
            </div>
            <!--部分覆盖开始--><!--此处为部分覆盖和全覆盖作为选项卡显示，选择全覆盖显示全覆盖信息，部分覆盖隐藏；反之.-->
            <div class="prt_fg">
                <div class="bc_contit2 left" id="someDiv" style="display:none;">
                    <span class="metadata"></span>
                    <div class="xz_cont_1 xz_cont1_height" id="longDiv">
                        <label class="label_sty left">经度</label>
                        <input class="range-slider" type="hidden" id="longSlider"/>
                        <span class="span_font">取值范围：</span>
                        <input type="text" value="" id="longMinVal"/>-
                        <input type="text" value="" id="longMaxVal"/>
                        </br></br>
                        <span class="span_font" id="longRange">取值范围：-180~180</span>
                        <div class="clearfix"></div>
                    </div>
                    <div class="xz_cont_1 xz_cont1_height" id="latiDiv">
                        <label class="label_sty left">纬度</label>
                        <input class="range-slider" type="hidden" id="latiSlider"/>
                        <span class="span_font">取值范围：</span>
                        <input type="text" value="" id="latMinVal"/>-
                        <input type="text" value="" id="latMaxVal"/>
                        </br></br>
                        <span class="span_font" id="latiRange">取值范围：-90~90</span>
                        <div class="clearfix"></div>
                    </div>
                   <!-- <div class="xz_cont_1 xz_cont1_height" id="depthDiv" style="display:none">
                        <label class="label_sty left">深度/高度(层数)</label>
                        <input class="range-slider" type="hidden" id="depthSlider"/>
                        <span class="span_font">取值范围：</span>
                        <input type="text" value="" id="depthMinVal"/>-
                        <input type="text" value="" id="depthMaxVal"/>
                        </br></br>
                        <span class="span_font" id="depthRange">取值范围：-90~90</span>
                        <div class="clearfix"></div>
                    </div>-->
                    <div class="clearfix"></div>
                </div>
                <div class="bc_contit2 left select-time">
                    <div><span class="bc_xz left">时间段</span></div>
                    <div><span>请选择开始时间:</span><input  type="date" id="beginDate" style="width: 20%" name="trip-start"></div>
                    <div><span>请选择结束时间:</span><input  type="date" id="endDate" style="width: 20%" name="trip-start"></div>
                    <!--<input class="bc_sj left time-input" id="beginDate" style="width: 20%" placeholder="请选择开始时间">-->
<!--                    <input type="text" class="time-input" id="beginDate" placeholder="请选择开始时间" />-->
                    <!--<input class="bc_sj left time-input" id="endDate" style="width: 20%" placeholder="请选择结束时间">-->
<!--                    <input type="text" class="time-input" id="endDate" placeholder="请选择结束时间" />-->
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
                <div class="dingyue_div">
                    <div class="dingyue" onclick="createWork()">订阅</div>
                    <div class="dingyue_2" onclick="returnback()">返回</div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/ocean/js/subscription.js}"></script>
<script type="text/javascript" src="/ocean/js/dd_belatedpng_0.0.8a-min.js"></script>
<script type="text/javascript" src="/ocean/js/bootstrap-paginator.js"></script>
<th:block th:include="include::footer"/>
<th:block th:include="include::datetimepicker-js"/>
<script type="text/javascript" src="/ocean/js/laydate.js"></script>
<script type="text/javascript" src="/ocean/js/jquery.range.js"></script>
<!--<script type="text/javascript" src="/ajax/libs/layui/modules/laydate.js"></script>-->
<script>
function returnback() {
    $("#test").load("/home/productBrowsing/browseHP")
}

</script>
</html>
